<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="荣誉墙" name="first">
        <honor-wall ref="honorWallRef"></honor-wall>
      </el-tab-pane>
      <el-tab-pane label="组织奖惩管理" name="second" style="height: 100% !important;">
        <org-single-rewards ref="orgRewardsRef" :isOrgRewards="true"></org-single-rewards>
      </el-tab-pane>
      <el-tab-pane label="个人奖惩管理" name="third">
        <org-single-rewards ref="singleRewardsRef" :isOrgRewards="false"></org-single-rewards>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Honor">
import HonorWall from './component/HonorWall.vue'
import OrgSingleRewards from './component/OrgSingleRewards.vue'
const activeName = ref('first');
const honorWallRef = ref(null);
const orgRewardsRef = ref(null);
const singleRewardsRef = ref(null);
function handleTabClick(tab) {
  activeName.value = tab.props.name;
  if (activeName.value === 'first') {
    honorWallRef.value.refresh();
  } else if (activeName.value ==='second') {
    orgRewardsRef.value.refresh();
  } else if (activeName.value === 'third') {
    singleRewardsRef.value.refresh();
  }
}
</script>
<style lang="scss" scoped>
.el-tabs__content {
  height: 100% !important;
}
</style>